<template>
    <f7-page @page:beforein="pageBeforeIn">
        <f7-navbar>
            <f7-nav-left :back-link="true"></f7-nav-left>
            <f7-nav-title :title="pageTitle"></f7-nav-title>
            <f7-nav-right v-if="isShow" panel-open="right" color="blue" style="margin-left: 0px;"  >
                <f7-link panel-open="right" style="width: 100%;" >
                    <f7-icon material="search"></f7-icon>
                    <p>查看时间</p>
                </f7-link>
            </f7-nav-right>
            <f7-subnavbar>
                <f7-toolbar tabbar>
                    <f7-link tab-link="#localCheck-unprocessed-list-tab" tab-link-active>
                        <span class="tabbar-label" @click="hidenSearch">待办({{unprocessed == undefined ? 0 : unprocessed.length}})</span>
                    </f7-link>
                    <f7-link tab-link="#localCheck-processed-list-tab">
                        <span class="tabbar-label" @click="showSearch('yb')">已办({{processed == undefined ? 0 : processed.length}})</span>
                    </f7-link>
                    <f7-link tab-link="#localCheck-cc-list-tab">
                        <span class="tabbar-label" @click="showSearch('cc')">抄送({{cc == undefined ? 0 : cc.length}})</span>
                    </f7-link>
                </f7-toolbar>
            </f7-subnavbar>
        </f7-navbar>
        <f7-tabs>
            <!-- 代办 -->
            <f7-tab id="localCheck-unprocessed-list-tab" tab-active>
                <ProblemList :task="task" :problems="unprocessed"></ProblemList>
            </f7-tab>

            <!-- 已办 -->
            <f7-tab id="localCheck-processed-list-tab">
                <ProblemList :task="task" :problems="processed"></ProblemList>
            </f7-tab>

            <!-- 抄送 -->
            <f7-tab id="localCheck-cc-list-tab">
                <ProblemList :task="task" :problems="cc"></ProblemList>
            </f7-tab>
        </f7-tabs>
        <ChangeDate></ChangeDate>
    </f7-page>
</template>

<script>
    import back from '@/mixins/back.js';
    import todoLoad from '@/mixins/todoLoad.js';
    import store from '@/store';
    import ProblemList from "../../../common/ProblemList";
    import ChangeDate from "../common/ChangeDate";
    import eventBus from '@/utils/eventBus.js';
    export default {
        components: {ChangeDate, ProblemList},
        mixins: [back,todoLoad],
        store: store,
        data: function() {
            return {
                pageTitle: '现场检查待办',
                durationDay: 7,
                startDate: '',
                endDate: '',
                isShow: false,
                showTab: '',
                task: "local"
            }
        },
        methods: {
            pageBeforeIn: function() {
                this.loadLocalList();
            },
            hidenSearch: function() {
                this.isShow = false;
                this.showTab = '';
            },
            showSearch: function(tab){
                this.isShow = true;
                this.showTab = tab;
            },
            dateDownload: function (data) {
                console.log(data);
            }
        },
        computed: {
            cc: function(){
                return this.localCcList;
            },
            processed: function(){
                return this.localProcessedList;
            },
            unprocessed: function(){
                return this.localUnprocessedList;
            },
        },
        created: function(){

        },
        mounted: function(){
            var self = this;
			var ptrContentProcessed = this.Dom7('.ptr-content');
			ptrContentProcessed.on('ptr:refresh', function(e) {
				e.detail();
				eventBus.$emit("load-local-list", false);
			});
        },
        watch: {

        }
    }

</script>